<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1000px"
    @close="close"
  >
    <el-row :gutter="20">
      <el-col :lg="4" :md="8" :sm="24" :xl="6" :xs="24">
        <vab-card shadow="hover">
          <el-tree
            ref="treeRef"
            :data="tree"
            :default-expanded-keys="expandDefault"
            highlight-current
            node-key="id"
            :props="defaultProps"
            show-checkbox
          />
        </vab-card>
      </el-col>
      <el-col :lg="20" :md="16" :sm="24" :xl="18" :xs="24">
        <vab-card shadow="hover">
          <vab-query-form>
            <el-form inline :model="queryForm" @submit.prevent>
              <el-form-item>
                <el-input
                  v-model.trim="queryForm.search"
                  clearable
                  placeholder="请输入名称"
                  @keyup.enter="getList('search')"
                />
                <el-button
                  :icon="Search"
                  style="margin-left: 10px"
                  type="primary"
                  @click="getList('search')"
                >
                  查询
                </el-button>
              </el-form-item>
              <!-- <el-form-item>
                <el-button
                  :icon="Search"
                  type="primary"
                  @click="fetchData('search')"
                >
                  查询
                </el-button>
              </el-form-item> -->
            </el-form>
          </vab-query-form>
          <el-table
            v-loading="listLoading"
            border
            :data="list"
            default-expand-all
            lazy
            :tree-props="{ children: 'Contact' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column
              label="物资编码"
              prop="Code"
              show-overflow-tooltip
            /> -->
            <el-table-column
              label="物料名称"
              min-width="98"
              prop="FullName"
              show-overflow-tooltip
            />
            <el-table-column
              label="物资简称"
              min-width="98"
              prop="Abbreviation"
              show-overflow-tooltip
            />
            <el-table-column
              label="规格型号"
              min-width="98"
              prop="Spec"
              show-overflow-tooltip
            />
            <el-table-column
              label="计量单位"
              min-width="98"
              prop="Unit"
              show-overflow-tooltip
            />
            <el-table-column label="单价" prop="Price" show-overflow-tooltip />
            <!-- <el-table-column
              label="标准"
              prop="Standard"
              show-overflow-tooltip
            /> -->
            <template #empty>
              <!-- <el-image
                class="vab-data-empty"
                :src="require('@/assets/empty_images/data_empty.png')"
              /> -->
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
          <el-pagination
            background
            :current-page="queryForm.pageNo"
            :layout="layout"
            :page-size="queryForm.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </vab-card>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { doEdit, gets, getItemList, getSupplierList } from '@/api/supItem'
  import { Search } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'SupItemEdit',
    props: {
      tree: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['fetchData'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        treeRef: null,
        defaultProps: {
          children: 'ChildNodes',
          label: 'text',
        },
        list: [],
        data: [],
        total: 0,
        layout: 'total, sizes, prev, pager, next, jumper',
        search: '',
        listLoading: false,
        expandDefault: [],
        multipleSelection: [],
        queryForm: {
          companyId: 'string',
          pageNo: 1,
          pageSize: 20,
          wheres: `[{"name":"ModuleId","value":"value","displayType":"equal"}]`,
          export: false,
          search: '',
        },
        form: {},
        rules: {
          code: [
            { required: true, trigger: 'blur', message: '请输入物资编码' },
          ],
          companyId: [
            { required: true, trigger: 'blur', message: '请选中公司主键' },
          ],
          fullName: [
            { required: true, trigger: 'blur', message: '请输入物资名称' },
          ],
          price: [{ required: true, trigger: 'blur', message: '请输入单价' }],
          CompanyId: [
            { required: true, trigger: 'blur', message: '请选择所在公司' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })

      //获取详情数据
      const getS = async () => {
        state.listLoading = true
        const {
          data: { data },
        } = await gets(state.queryForm)
        state.form = data
        state.listLoading = false
      }
      //获取列表
      const getList = async (val) => {
        const params = JSON.parse(JSON.stringify(state.queryForm))
        if (val == 'search') {
          params.pageNo = 1
          params.wheres = `[{"name":"FullName","value":"${params.search}","displayType":"like"}]`
        }
        const {
          data: { rows, total },
        } = await getItemList(params)
        state.list = rows
        state.total = total
        state.listLoading = false
      }
      // const getTree = async (val) => {
      //   const {
      //     data: { rows, total },
      //   } = await getSupplierList({})
      //   state.data = rows
      //   state.total = total
      //   state.listLoading = false
      // }
      const showEdit = (row, type) => {
        if (type != 'edit') {
          state.title = '添加'
        } else {
          state.title = '编辑'
          state.queryForm.companyId = row.CompanyId
          state.queryForm.siid = row.SIID
          getS()
        }
        getList()
        // getTree()
        state.dialogFormVisible = true
      }
      //分页条数切换
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      //分页切换
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const close = () => {
        state.form = {}
        state.dialogFormVisible = false
      }
      //右侧列表物资多选
      const handleSelectionChange = (val) => {
        state.multipleSelection = val.map((item) => {
          return item.IID
        })
      }
      const save = async () => {
        const supList = state['treeRef'].getCheckedKeys()
        if (supList.length < 1) {
          $baseMessage('请选择供应商！', 'warning', 'vab-hey-message-warning')
          return
        }
        if (state.multipleSelection.length < 1) {
          $baseMessage(
            '请选择供应商物质！',
            'warning',
            'vab-hey-message-warning'
          )
          return
        }
        const params = {
          supID: supList.join(','),
          iid: state.multipleSelection.join(','),
          siid: state.iid,
        }
        const { message } = await doEdit(params)
        $baseMessage(message, 'success', 'vab-hey-message-success')
        close()
        emit('fetchData')
      }
      return {
        ...toRefs(state),
        showEdit,
        getS,
        close,
        save,
        handleSizeChange,
        handleCurrentChange,
        getList,
        Search,
        handleSelectionChange,
        // getTree,
      }
    },
  })
</script>
<style scoped>
  .el-form {
    display: flex;
    flex-flow: wrap;
    justify-content: left;
  }
  .el-form >>> .el-input {
    width: 234px !important;
  }
  .el-form-item {
    width: 380px;
  }
</style>
